<template>
  <div>
    <el-page-header content="产品销量查询" @back="goBack">
    </el-page-header>
    <!-- 主页表格 -->
    <el-table
      :data="products"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="p_id"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="p_name"
        label="产品名称"
        width="180">
      </el-table-column>
      <!-- <el-table-column
        prop="p_picture"
        label="产品海报"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_number"
        label="产品数量"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_importPrice"
        label="产品指导价(万元)"
        width="100">
      </el-table-column>

      <el-table-column
        prop="p_sellPrice"
        label="产品售价(万元)"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_date"
        label="出厂时间"
        width="100">
      </el-table-column>
      <el-table-column
        prop="en_nickname"
        label="能源类型"
        width="100">
      </el-table-column>

      <el-table-column
        prop="pr_name"
        label="环保等级"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_kw"
        label="最大功率"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_nm"
        label="最大扭矩"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_fdj"
        label="发动机介绍"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_bs"
        label="变速箱"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_ckg(cm)"
        label="规格"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_cg"
        label="车身结构"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_km"
        label="最高速度"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_s"
        label="官方0-100km/h加速(s)"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_zp"
        label="整车质保"
        width="100">
      </el-table-column> -->
      <el-table-column
        prop="p_sellNumber"
        label="销售量"
        width="180">
      </el-table-column>
      <!-- <el-table-column
        prop="p_productNumber"
        label="商品(汽车类型)种类"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_nickname"
        label="商品归类(级别)"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_particular"
        label="商品详情"
        width="100">
      </el-table-column>
      <el-table-column
        prop="p_s_name"
        label="店铺"
        width="100">
      </el-table-column>
      <el-table-column
        prop="m_name"
        label="厂家"
        width="100">
      </el-table-column>
      <el-table-column
        prop="status"
        label="商品状态"
        width="100">
      </el-table-column> -->
      <!--  -->
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        products:[],
        currentsize:1,
        pagesize:3,
        // 分页
        currentPage: 1,
        total:0,
        pagesize:3,
    }
  },
  methods:{
    init(){
      let obj = {
        indexPage:this.currentPage, 
        pageSize:this.pagesize
      }
      this.$ajax({
        url:"after/products",
        method:"get",
        params:obj
      }).then(resp=>{
        if(resp.data.status === 1){
          this.products = resp.data.message
          this.total = resp.data.totalPage
        }
      })
    },
    // 数据表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else{
        return 'success-row';
      }
    },
    // handleClick(row) {
    //   console.log(row);
    //   let status = 0;
    //   if(row.ca_status=="正常"){
    //     status=0
    //   }else{
    //     status=1
    //   }
    //   let obj = {
    //     id:row.ca_id, 
    //     status
    //   }
    //   this.$ajax({
    //     url:"after/carousel",
    //     method:"delete",
    //     params:obj
    //   }).then(resp=>{
    //     if(resp.data.status === 1){
    //       if(row.ca_status=="正常"){
    //         this.$message.error('已禁用');
    //       }else{
    //         this.$message({
    //           message: '启用成功',
    //           type: 'success'
    //         });
    //       }
    //       this.init();
    //     }
    //   })
    // },
    // 分页
    handleSizeChange(val) {
      this.pagesize = val
      this.init();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
      // console.log(`当前页: ${val}`);
    },
    goBack() {
      this.$router.push("/")
    }
  },
  created(){
    this.init();
  }
}
</script>

<style scoped>
/* 数据表格 */
.el-table .warning-row {
    background: oldlace;
  }
.el-table .success-row {
  background: #f0f9eb;
}
</style>